<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<style>
		*{ margin: 0px; padding: 0px;}
	</style>
	<body>
		<canvas id="myCanvas" style="background: #000000;"></canvas>
	</body>
</html>
<script src="utils.js"></script>
<script src="ball.js"></script>
<script>
	
	var canvas = document.getElementById('myCanvas');
	var ctx = canvas.getContext('2d');
	canvas.width = window.innerWidth;
	canvas.height = window.innerHeight;
	
	var mouse = utils.captureMouse(canvas);
	var ball = new Ball(40, 'red');
	ball.x = canvas.width/2;
	ball.y = canvas.height/2;
	ball.draw(ctx);
	
	 function state(wrd){
           /*注意这里用到了我们前面新加的代码
             ball.getBounds(): 返回一个对象包含球的坐标，宽高.并作为参数传入
             utils.containsPoint(): 判断点击区域，返回布尔值
           */
           if(utils.containsPoint(ball.getBounds(), mouse.x, mouse.y)){
              console.log("in ball : "+ wrd);
           }else{
               
               console.log("canvas : "+ wrd);
           }
       }
	
	canvas.addEventListener('mousedown', function(event){
       state("mousedown");
       //mouseup
       canvas.addEventListener('mouseup', function(event){
            state("mouseup");
       },false);
       //mousemove
       canvas.addEventListener('mousemove', function(event){
            state("mousemove");
       }, false);
   }, false);
	
</script>
